<template>
<div>
    <h1 class="page-header">{{title}}</h1>

    <div class="media" v-for="item in subjects"
    :key="item.id">
        <div class="media-left">
          <router-link
          :to="{name:'moviedetail', params:{id:item.id}}">

            <img :src="item.images.small" alt="海报点击链接">
            </router-link>
      </div>
            <div class="media-body">
                <h4 class="media-heading">{{item.title}}</h4>
                {{item.genres}}
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  // 组件要使用vuex中的state中的数据
  // 写在计算属性中
  computed: {
    // 找到是哪个模块的哪个属性
    ...mapState('movieList', ['title', 'subjects'])
  },
  created() {
    // path->路由配置对象
    // js 获取路由配置对象.path
    // console.log(this.$route)
    this.setData({
      path: this.$route.path
    })
  },
  // watch观测
  // 观测$route路由对象的变化
  // 当routerllink点击时 $route.path就变化了
  // 就会触发函数
  // to 要跳转的路由配置对象 this.$route
  // from 当前的路由配置对象
  watch: {
    $route(to, from) {
      // console.log(to)
      // 对路由变化作出响应...
      this.setData()

      // this.setData({
      //   path: to.path
      // })
    }
  },
  methods: {
    // setData(){
    // }
    // 找到是哪个模块的哪个方法
    ...mapActions('movieList', ['setData'])
  }
}
</script>

<style>
</style>
